<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/public.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/nav.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/rp_head.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/to_style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user/reset_password.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/iconFont/iconfont.css">
    <script src="${pageContext.request.contextPath}/static/js/frame/jquery-3.5.1.min.js"></script>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.1/lib/index.js"></script>
    <style>
        @import url("//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css");
        body {
            font: 12px/1.5 tahoma,arial,"Hiragino Sans GB",宋体;
            font-size: 12px;
            color: #4d4d4d;
        }
    </style>
</head>
<body>
<!-- 头部 start-->
<jsp:include page="../public_page/rp_head.jsp"></jsp:include>
<!-- 头部 end-->


<!-- 身体 start-->

<div id="content">
    <!-- 验证窗口 start-->
    <div id="content2">

        <c:if test="${empty sessionScope.fpUser}" var="userEmpty">
        <!-- 用户session超时展示 start-->
        <jsp:include page="../public_page/time_out.jsp"></jsp:include>
        <!-- 用户session超时展示 end-->
        </c:if>


<%--        判断，如果不未空--%>
        <c:if test="${!userEmpty}">
        <p class="ft-14">你正在为账户 <em class="ft-orange">    		${fn:substring(sessionScope.fpUser.phone, 0, 3)}******${fn:substring(sessionScope.fpUser.phone, 9, 11)}
            <input type="hidden" value="${sessionScope.fpUser.phone}" id="phone">
        </em> 重置登录密码，请选择重置方式：
        </p>
        <div class="infobox">
            <div class="ui-tipbox ui-tipbox-message fn-hide" id="J-check-wait">
                <div class="ui-loading"></div>
                <div class="ui-tipbox-content">

                    <h3 class="ui-tipbox-title" id="check-status">检测账户状态</h3>
                </div>
            </div>
            <div class="ui-tipbox ui-tipbox-success" id="J-check-ok" style="display: none">
                <div class="ui-tipbox-icon ui-icon-success">
                </div>

                <div class="ui-tipbox-content">
                    <h3 class="ui-tipbox-title">经过检测，你在<font color="#f57800">不常用的环境</font>下操作，需要进行安全校验</h3>
                </div>
            </div>
        </div>

        <ol class="select-strategy" id="J-select-strategy" style="display: none">
            <li class="fn-clear">
                <i class="icon icon-bind_card_identify"></i>
                <div class="desc desc-hasnotice">
                    <h3 class="title"><span class="text">通过手机号码验证</span><i class="recommend">推荐</i></h3>
                    <p class="notice">可使用您绑定的手机号码进行验证</p>
                </div>
                <div class="ui-button2 ui-button-morange">
                    <a class="ui-button-text j-strategy"  href="${pageContext.request.contextPath}/user/phone_check.htm" id="send-code">立即重置</a>
                </div>
            </li>
            <li class="fn-clear">
                <i class="icon icon-manual"></i>
                <!-- CMS:cms/会员中心/身份验证选择方式开始:console/queryStrategy.vm -->
                <div class="desc desc-hasnotice">
                <h3 class="title"><span class="text">通过邮箱验证</span></h3>
                <p class="notice">使用您绑定的邮箱进行验证</p>
                </div>
                <div class="ui-button2 ui-button-morange">
                    <c:if test="${empty sessionScope.fpUser.email}" var="emailNull">
                        <a class="ui-button-text j-strategy" target="_blank" onclick="haveNotEmail()">立即重置</a>
                    </c:if>
                    <c:if test="${!emailNull}">
                        <input type="hidden" value="${sessionScope.fpUser.email}" id="email"/>
                        <a class="ui-button-text" id="send-email" target="_blank">立即重置</a>
                    </c:if>
                </div>
            </li>
        </ol>
        </c:if>
    </div>
    <!-- 验证窗口 end-->
</div>

<div id="app">
    <!-- 消息提示 -->
    <template>
        <el-button plain @click="emailNull" id="email-null" style="display: none"> </el-button>
    </template>
</div>

<!-- 身体 end-->
</body>
<script>
    $("body").ready(function () {
        var title = $("#check-status");
        setTimeout(function () {
            title.text("账户状态检测完成");
            title.addClass("check-ok5");
            setTimeout(function () {
                title.text("检测是否为常用电脑...");
                title.removeClass("check-ok5");
                setTimeout(function () {
                    title.text("电脑检测完成");
                    title.addClass("check-ok5");
                    setTimeout(function () {
                        title.text("检测你的安全产品...");
                        title.removeClass("check-ok5");
                        setTimeout(function () {
                            title.text("安全产品检测完成");
                            title.addClass("check-ok5");
                            setTimeout(function () {
                                $("#J-check-wait").hide();
                                $("#J-check-ok").show();
                                // 检测完成，显示验证方式
                                $("#J-select-strategy").show();
                            }, 400);
                        }, 500);
                    }, 600);
                }, 700);
            }, 800);
        }, 500);
    });

    $("#send-email").click(function () {
        window.location.href="/user/email_check.htm?email="+$("#email").val();
    })

    function haveNotEmail() {
        $("#email-null").click();
    }


    // 错误信息
    var Main = {
        methods: {
            emailNull() {
                this.$notify.error({
                    title: '错误 - 重置登录密码',
                    dangerouslyUseHTMLString: true,
                    message: '<p style="color: red; font-size: 15px">该账户未绑定过邮箱，请选择其他验证方法</p>',
                    position: 'top-left',
                });
            },
        }
    }
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#app');
</script>
</html>
